<template>
  <view class="goods-detail">
    <view class="goods" @click="onJump(url)">
      <view class="picture">
        <u--image :src="item.productImage" width="128rpx" height="128rpx" mode="aspectFit" radius="6">
        </u--image>
      </view>
      <view class="detail">
        <u-text :customStyle="{fontWeight: 'bold'}" :text="item.productName" lineHeight="20" size="32rpx"
                :lines="2"></u-text>
        <view class="skuName" v-if="item.skuNames">{{ item.skuNames }}</view>
      </view>
      <view class="price">
        <view class="money">
          ￥
          <text class="showPrice">{{ getPrice(item.salePrice, 1) }}</text>
          .{{ getPrice(item.salePrice, 2) }}
        </view>
        <view class="number">x {{ item.quantity }}</view>
      </view>
    </view>
    <view class="afterSales" v-if="afterSales.isApply">
      <text class="btn" v-if="afterSales.isApply && !afterSales.apply"
            @click="onJump('/pages/my/order/afterSale/apply?orderId='+afterSales.orderId+'&Did='+item.id)">申请售后
      </text>
      <text class="btn"
            v-if="afterSales.isApply && afterSales.apply && afterSales.afterSalesId && (afterSales.afterSalesStatus == 1 || afterSales.afterSalesStatus == 6 || afterSales.afterSalesStatus == 8 || afterSales.afterSalesStatus == 9 )"
            @click="onJump('/pages/my/order/afterSale/details?id='+afterSales.afterSalesId)">售后进度
      </text>
      <text class="btn"
            v-if="afterSales.isApply && afterSales.apply && afterSales.afterSalesId && afterSales.afterSalesStatus == 4"
            @click="onJump('/pages/my/order/afterSale/details?id='+afterSales.afterSalesId)">售后记录
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'order-goods-item',
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    customStyles: {
      type: Object,
      default() {
        return {}
      }
    },
    borderBottom: {
      type: Boolean,
      default: true
    },
    url: {
      type: String,
      default: ""
    },
    afterSales: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    // 页面跳转
    onJump(url) {
      if (url) {
        uni.navigateTo({
          url
        })
      }
    },
    // 得到显示的金额
    getPrice(price, type) {
      let valMoney = price.toString().split(".");
      let decimals = "00";
      let showPrice = "0";
      if (valMoney.length == 2) {
        showPrice = valMoney[0];
        if (valMoney[1].length == 1) {
          decimals = valMoney[1] + "0"
        } else {
          decimals = valMoney[1];
        }
      } else {
        showPrice = valMoney[0];
      }
      if (type == 1) {
        return showPrice
      } else {
        return decimals
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-detail {
  margin-bottom: 40rpx;

  .goods {
    display: flex;
    position: relative;

    .detail {
      flex: 1;
      margin: 0 20rpx;

      .skuName {
        color: #AAAAAA;
        font-size: 22rpx;
        margin-top: 15rpx;
      }
    }

    .price {
      text-align: right;

      .money {
        font-size: 22rpx;

        .showPrice {
          font-size: 30rpx;
        }
      }

      .number {
        color: #999999;
        font-size: 24rpx;
        margin-top: 20rpx;
      }
    }
  }

  .afterSales {
    text-align: right;
    color: #999999;
    padding-top: 10rpx;

    .btn {
      display: inline-block;
      border: 1rpx solid #999999;
      border-radius: 100rpx;
      padding: 5rpx 15rpx;
    }
  }
}
</style>
